.event-function {
    display: flex;
    height: 100%;
    .left-wrap {
        width: 50%;
        border: 1px solid var(--edit-border-color);
        .list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
            .list-item {
                width: calc(50% - 10px);
                height: 110px;
                margin-bottom: 20px;
                border: 1px solid var(--edit-border-color);
                border-radius: 2px;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &.active {
                    border-color: var(--edit-color-primary);
                }
                .list-item-image {
                    .el-icon {
                        font-size: 36px;
                    }
                }
                .list-item-title {
                    margin-top: 5px;
                }
            }
        }
    }
    .right-wrap {
        width: 50%;
        border: 1px solid var(--edit-border-color);
        margin-left: 5px;
        .right-content {
            // 下面的 & > 是为了使样式只作用第一代子元素，而不影响孙子子元素
            & > ::v-deep(.function-preview) {
                & > .function-preview-content {
                    & > .function-call,
                    & > .function-copy,
                    & > .function-add-contact,
                    & > .function-turn-to-xcx,
                    & > .function-wifi,
                    & > .function-sidebar-control,
                    & > .function-popup-window-control,
                    & > .function-share,
                    & > .function-page-share,
                    & > .function-action-custom,
                    & > .function-view-control,
                    & > .function-turn-to-form-generator,
                    & > .function-turn-to-xcx-page-url,
                    & > .function-turn-to-h5,
                    & > .function-request-subscribe-message,
                    & > .function-show-modal {
                        padding: 30px 20px;
                    }
                    & > .function-top,
                    & > .function-open-camera,
                    & > .function-contact,
                    & > .function-preview-picture {
                        padding: 0 20px;
                    }
                    & > .function-turn-to-xcx,
                    & > .function-request-subscribe-message {
                        .row-wrap {
                            width: 100%;
                            display: flex;
                            .el-select {
                                flex: 1;
                            }
                            .right-wrap {
                                margin: 0;
                                margin-left: 10px;
                                width: auto;
                            }
                        }
                    }
                    & > .function-set-variable {
                        .select-variable-btn {
                            width: 100%;
                            justify-content: start;
                            padding: 1px 11px;
                            & > span {
                                display: flex;
                                width: 100%;
                                height: 100%;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
    }
}